<template>
    <div class="person">
      <toast v-model="showToast" type="text" :time="800" is-show-mask text="敬请期待" :position="'center'"></toast>
        <div class="person-header">
            <div class="person-header-han">
                <img src="../../assets/images/test1.png" />
            </div>
            <div class="person-header-name">钟镇涛</div>
        </div>
        <div class="person-sencod">
            <div class="person-flex-box">
                <div class="person-order">
                    <div class="person-order-header" @click="goPage('')">
                        我的订单
                    </div>
                    <div class="person-order-content">
                        <div class="person-order-content-flx">
                            <div class="person-order-content-flx-col" @click="goPage(0)">
                                <div><img src="../../assets/images/paying.png" /></div>
                                <div class="person-order-content-flx-col-text">待付款</div>
                            </div>
                            <div class="person-order-content-flx-col" @click="goPage(1)">
                                <div><img src="../../assets/images/forto.png" /></div>
                                <div class="person-order-content-flx-col-text">待发货</div>
                            </div>
                            <div class="person-order-content-flx-col" @click="goPage(4)">
                                <div><img src="../../assets/images/carting.png" /></div>
                                <div class="person-order-content-flx-col-text">待收货</div>
                            </div>
                            <div class="person-order-content-flx-col" @click="goPage(5)">
                                <div><img src="../../assets/images/pesce.png" /></div>
                                <div class="person-order-content-flx-col-text">待评价</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="person-content-footer">
                    <div class="person-content-footer-flex">
                        <div class="person-content-footer-flex-left" @click="goPage1()"><img src="../../assets/images/address.png" />
                            <span>收货地址</span>
                        </div>
                        <div class="person-content-footer-flex-right"><img src="../../assets/images/gopage.png" /></div>
                    </div>
                    <div class="person-content-footer-flex" @click="coupon">
                        <div class="person-content-footer-flex-left"><img src="../../assets/images/coupon.png" />
                            <span>优惠劵</span>
                        </div>
                        <div class="person-content-footer-flex-right"><img src="../../assets/images/gopage.png" /></div>
                    </div>
                    <div class="person-content-footer-flex" @click="goPageIn()">
                        <div class="person-content-footer-flex-left"><img src="../../assets/images/invitation.png" />
                            <span>邀请</span>
                        </div>
                        <div class="person-content-footer-flex-right"><img src="../../assets/images/gopage.png" /></div>
                    </div>
                    <div class="person-content-footer-flex" style="border:none" @click="goPagePhone()">
                        <div class="person-content-footer-flex-left"><img src="../../assets/images/binding.png" />
                            <span>绑定手机</span>
                        </div>
                        <div class="person-content-footer-flex-right"><img src="../../assets/images/gopage.png" /></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from "vux";
export default {
  components:{
    Toast
  },
  data(){
    return{
      showToast:false
    }
  },
  methods: {
    goPage(status) {
      this.navigation_push("order",{status:status});
    //  this.$router.push({ path: "/order" });
    },
    goPage1() {
       this.navigation_push("address");
    //this.$router.push({ path: "/address" });
    },
    goPagePhone() {
      this.navigation_push("bingPhone");
    //  this.$router.push({ path: "/bingPhone" });
    },
    goPageIn() {
      this.navigation_push("invitation");
     
    },
    coupon(){
      this.showToast=true;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/variables.scss";
.person {
  height: 100%;
  background-color: rgba(246, 246, 246, 1);
  .person-header {
    background-image: url(./../../assets/images/personBack.png);
    height: 4.5333rem;
    background-size: 100%;
    .person-header-han {
      text-align: center;
      padding: 0.44rem 0 0.1333rem;
      img {
        width: 1.7067rem;
        height: 1.7067rem;
        border-radius: 50%;
      }
    }
    .person-header-name {
      text-align: center;
      font-size: 0.4267rem;
      color: rgba(255, 255, 255, 1);
    }
  }
  .person-flex-box {
    margin: 0 0.5333rem;
  }
  .person-sencod {
    position: relative;
    top: -43px;
  }
  .person-order {
    box-shadow: 1px 5px 7px #e2e2e2;
    -webkit-box-shadow: 1px 5px 7px #e2e2e2;
    background-color: white;
    border-radius: 0.08rem;
    .person-order-header {
      font-size: 0.3733rem;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      padding: 0.3333rem 0.4rem 0;
    }
    .person-order-content {
      margin-top: 0.5867rem;
      padding-bottom: 0.6133rem;
      .person-order-content-flx {
        display: flex;
        .person-order-content-flx-col {
          width: 25%;
          text-align: center;
          img {
            width: 0.6667rem;
            height: 0.6667rem;
          }
          .person-order-content-flx-col-text {
            margin-top: 0.0667rem;
            font-size: 0.3467rem;
            font-weight: 500;
            color: rgba(102, 102, 102, 1);
          }
        }
      }
    }
  }
  .person-content-footer {
    padding: 0 0.3067rem;
    margin-top: 0.5467rem;
    box-shadow: 1px 5px 7px #e2e2e2;
    -webkit-box-shadow: 1px 5px 7px #e2e2e2;
    background-color: white;
    border-radius: 0.08rem;
    .person-content-footer-flex {
      display: flex;
      padding: 0.3867rem 0;
      border-bottom: 1px solid $border-bottom-color;
      .person-content-footer-flex-left {
        align-items: Center;
        display: flex;
        flex: 1;

        img {
          width: 0.5333rem;
          height: 0.5333rem;
          margin-right: 0.2667rem;
        }
        span {
          font-size: 0.3467rem;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }
      }
      .person-content-footer-flex-right {
        position: relative;
        left: 0.1067rem;
        img {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
    }
  }
}
</style>

